<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
    watch 选项期望接受一个对象，其中键是需要侦听的响应式组件实例属性(例如，通过 data 或computed 声明的属性)--值是相应的回调函数。该回调函数接受被侦听源的新值和旧值。


 -->
    <div id="app">
        <!-- v-model双向绑定mytext, 当input变化时，如果要监测，可以使用watch-->
        <input type="text" v-model="mytext">
        <ul>
            <li v-for="item in datalist" :key="item">
                {{item}}

            </li>
        </ul>
    </div>
    <script>
        var obj = {
            data() {
                return {
                    mytext: '',

                    datalist: ['aaa', 'abb', 'aab', 'bcc', 'abc', 'bcd', 'add', 'acd'],
                    baklist: ['aaa', 'abb', 'aab', 'bcc', 'abc', 'bcd', 'add',
                        'acd'
                    ]

                }
            },

            watch: {
                mytext(newVal, oldVal) {
                    // console.log(newVal, oldVal)
                    this.datalist = this.baklist.filter(item => item.includes(this.mytext))
                        // watch可以监听异步
                        // setTimeout(() => {
                        //     this.datalist = this.baklist.filter(item => item.includes(this.mytext))
                        // }, 2000)
                },

            }
        }

        var app = Vue.createApp(obj).mount('#app')
    </script>
</body>

</html>